<template>
  <div id="app">
    <h1>
      总选：
      {{ allChecked }}
      <input @change="onChange" v-model="allChecked" type="checkbox" style="width: 35px; height: 35px" />
    </h1>
    <ul v-for="item in list" :key="item.id">
      <li>
        <input type="checkbox" v-model="item.checked" />
        {{ item.goodsName }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
/**
 * 能不能通过watch监听到list数组中每一条数据中属性的变化
 */
export default {
  name: 'App',
  components: {},
  // data必须是函数形式
  data() {
    return {
      list: [],
      opt: {
        page: 1,
        size: 5,
      },
      checked: false,
      allChecked: false,
    }
  },
  created() {
    this.getData()
  },
  watch: {
    // 开启深度监听. 可以监听到引用类型中的每一个属性的变化
    // 深度监听主要是针对 ： []  {}
    // 反选
    list: {
      deep: true,
      // immediate: true, // 侦听开始后，立即调用
      handler(v, o) {
        console.log(v, 'v------------')
        this.allChecked = this.list.every((item) => {
          return item.checked
        })
      },
    },
  },
  //
  computed: {},
  methods: {
    // 总选
    onChange() {
      this.list.forEach((item) => {
        item.checked = this.allChecked
      })
    },
    onItemChange() {},
    async getData() {
      const res = await axios.get(`/api/cartData?_page=${this.opt.page}&_limit=${this.opt.size}`)
      console.log(res.data, 'res')
      this.list = res.data
    },
  },
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
